<!DOCTYPE html>
<html>
    <head>
        <title>Sparky</title>
        <script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js"></script>
        <script type="text/javascript" src="../../src/sparky.js"></script>
        <style type="text/css">
            @import url(../../style/screen.css);

            table {
                font-family: Monaco, Courier, monospace;
                font-size: 12px;
                border-collapse: collapse;
                margin: 0 0 1em 0;
            }

            td, th {
                padding: 2px 4px 3px 4px;
                text-align: right;
            }

            th.trend,
            td.trend {
                width: 60px;
            }

            th {
                color: #666;
                font-weight: normal;
            }

        </style>
    </head>
    <body>

        <h1>U.S. Unemployment, 2001-2011</h1>

        <p><span class="fw">Unemployment</span> in the United States started at
            <var>4.2%</var> in 2001, and more than doubled over the following
            decade <span id="summary" class="sparkline"></span> to 
            <var>8.5%</var> in December, 2011.</p>

        <p>Here are the numbers for each year from the <a href="http://data.bls.gov/timeseries/LNS14000000">Bureau of Labor Statistics</a>:</p>

        <table id="unemployment">
            <thead>
                <tr><th scope="row">Year</th><th scope="col">Jan</th><th scope="col">Feb</th><th scope="col">Mar</th><th scope="col">Apr</th><th scope="col">May</th><th scope="col">Jun</th><th scope="col">Jul</th><th scope="col">Aug</th><th scope="col">Sep</th><th scope="col">Oct</th><th scope="col">Nov</th><th scope="col">Dec</th></tr>
            </thead>
            <tbody>
                <tr><th scope="row">2001</th><td>4.2</td><td>4.2</td><td>4.3</td><td>4.4</td><td>4.3</td><td>4.5</td><td>4.6</td><td>4.9</td><td>5.0</td><td>5.3</td><td>5.5</td><td>5.7</td></tr>
                <tr><th scope="row">2002</th><td>5.7</td><td>5.7</td><td>5.7</td><td>5.9</td><td>5.8</td><td>5.8</td><td>5.8</td><td>5.7</td><td>5.7</td><td>5.7</td><td>5.9</td><td>6.0</td></tr>
                <tr><th scope="row">2003</th><td>5.8</td><td>5.9</td><td>5.9</td><td>6.0</td><td>6.1</td><td>6.3</td><td>6.2</td><td>6.1</td><td>6.1</td><td>6.0</td><td>5.8</td><td>5.7</td></tr>
                <tr><th scope="row">2004</th><td>5.7</td><td>5.6</td><td>5.8</td><td>5.6</td><td>5.6</td><td>5.6</td><td>5.5</td><td>5.4</td><td>5.4</td><td>5.5</td><td>5.4</td><td>5.4</td></tr>
                <tr><th scope="row">2005</th><td>5.3</td><td>5.4</td><td>5.2</td><td>5.2</td><td>5.1</td><td>5.0</td><td>5.0</td><td>4.9</td><td>5.0</td><td>5.0</td><td>5.0</td><td>4.9</td></tr>
                <tr><th scope="row">2006</th><td>4.7</td><td>4.8</td><td>4.7</td><td>4.7</td><td>4.6</td><td>4.6</td><td>4.7</td><td>4.7</td><td>4.5</td><td>4.4</td><td>4.5</td><td>4.4</td></tr>
                <tr><th scope="row">2007</th><td>4.6</td><td>4.5</td><td>4.4</td><td>4.5</td><td>4.4</td><td>4.6</td><td>4.7</td><td>4.6</td><td>4.7</td><td>4.7</td><td>4.7</td><td>5.0</td></tr>
                <tr><th scope="row">2008</th><td>5.0</td><td>4.9</td><td>5.1</td><td>5.0</td><td>5.4</td><td>5.6</td><td>5.8</td><td>6.1</td><td>6.1</td><td>6.5</td><td>6.8</td><td>7.3</td></tr>
                <tr><th scope="row">2009</th><td>7.8</td><td>8.3</td><td>8.7</td><td>8.9</td><td>9.4</td><td>9.5</td><td>9.5</td><td>9.6</td><td>9.8</td><td>10.0</td><td>9.9</td><td>9.9</td></tr>
                <tr><th scope="row">2010</th><td>9.7</td><td>9.8</td><td>9.8</td><td>9.9</td><td>9.6</td><td>9.4</td><td>9.5</td><td>9.6</td><td>9.5</td><td>9.5</td><td>9.8</td><td>9.4</td></tr>
                <tr><th scope="row">2011</th><td>9.1</td><td>9.0</td><td>8.9</td><td>9.0</td><td>9.0</td><td>9.1</td><td>9.1</td><td>9.1</td><td>9.0</td><td>8.9</td><td>8.7</td><td>8.5</td></tr>
            </tbody>
        </table>

        <script type="text/javascript" defer>
            var table = document.getElementById("unemployment"),
                thead = table.querySelector("thead tr"),
                rows = table.querySelectorAll("tbody tr");

            var header = thead.appendChild(document.createElement("th"));
            header.setAttribute("class", "trend");
            header.innerHTML = "trend";

            var options = sparky.presets.get("hilite-peaks", {
                width:  60,
                height: 14
            });

            var all = [];

            var rlen = rows.length;
            for (var r = 0; r < rlen; r++) {
                var row = rows[r],
                    cells = row.querySelectorAll("td"),
                    clen = cells.length,
                    values = [];
                for (var c = 0; c < clen; c++) {
                    var val = values[c] = Number(cells[c].innerHTML);
                    all.push(val);
                }
                var cell = row.appendChild(document.createElement("td"));
                cell.setAttribute("class", "trend");
                sparky.sparkline(cell, values, options);
            }

            delete options.width, options.height;
            sparky.sparkline("#summary", all, options);
        </script>

    </body>
</html>
